Ext.ns('AIR2.UI');
/***************
 * AIR2 Window Component
 *
 * An Ext.Window styled in the sleek manner of AIR2
 *
 * @class AIR2.UI.Window
 * @extends Ext.Window
 * @xtype air2window
 * @cfg {Boolean/String} allowAdd
 *   True to put an "add" button in the header of the window. Passing a string
 *   will set the text on that button.
 * @cfg {Array} tools
 *   Defines the tools positioned in the upper-right of the panel. Accepts
 *   Ext.Toolbar items, including spacers ' ' and alignment '->'.
 * @cfg {boolean} formAutoHeight
 *   Makes a modal form variable-height
 * @cfg {boolean} tabLayout
 *   Sets up as a tabbed-layout window
 *
 */
AIR2.UI.Window = function(cfg) {
    // setup "tools", using an Ext.Toolbar instead of the default handling of
    // Ext.Panel tools.
    var tools = (cfg.tools) ? [].concat(cfg.tools) : [' '];
    delete cfg.tools; //prevent default handling of "tools"
    if (cfg.allowAdd) {
        var addbtn = {
            xtype: 'air2button',
            air2type: 'DARK',
            iconCls: 'air2-icon-add',
            text: Ext.isString(cfg.allowAdd) ? cfg.allowAdd : 'New',
            handler: function() {this.fireEvent('addclicked', this)},
            scope: this
        };
        tools = ['->', addbtn].concat(tools); //addbtn goes first
    }

    // don't create the header text element ... we'll do it ourselves
    cfg.headerAsText = false;

    // call parent constructor
    AIR2.UI.Window.superclass.constructor.call(this, cfg);

    if (cfg.tabLayout) {
        this.addClass('tabbed-modal');
    }

    this.on('render', function(w) {
        var icon = (w.iconCls) ? (w.iconCls + ' icon') : '';
        w.header.addClass('air2-panel-header');
        var el = w.header.createChild({
            tag: 'table',
            cls: 'header-table',
            html:
                '<tr>' +
                  '<td class="header-title '+icon+'">'+cfg.title+'</td>' +
                  '<td class="header-total"></td>' +
                  '<td class="header-tools"></td>' +
                '</tr>'
        });
        if (tools.length > 0) {
            this.tools = new Ext.Toolbar({
                items: tools,
                renderTo: w.header.child('.header-tools')
            });
        }

        if (cfg.tabLayout) {
            var w1 = el.child('.header-title').getWidth();
            var w2 = el.child('.header-total').getWidth();
            w.get(0).on('render', function(tabpanel) {
                var tabct = tabpanel.el.child('.x-tab-strip');
                tabct.setStyle('padding-left', (w1+w2+10)+'px');
            });
        }
    });

    // fix autoheight
    if (cfg.formAutoHeight === true) {
        this.addClass('air2-auto-height');
    }

    // event for add button clicked
    this.addEvents('addclicked');

    this.on('beforeshow', function(win) {
        win.center();
    });
}
Ext.extend(AIR2.UI.Window, Ext.Window, {
    baseCls: 'air2-editwin',
    modal: true,
    draggable: false,
    resizable: false,
    shadow: false,
    closeAction: 'hide', // important -- don't destroy on close
    width: 820,
    height: 440,
    buttonAlign: 'left',
    layout: 'fit',
    setTotal: function(total) {
        if (!this.totalEl) this.totalEl = this.header.child('.header-total');
        this.totalEl.update(total + ' Total');
    }
});
Ext.reg('air2window', AIR2.UI.Window);